import React from 'react';
import createG2 from 'g2-react';
import { Frame } from 'g2';

class ChartOfPsNumOfCo extends React.PureComponent {
  constructor(props) {
    super(props);

    const jsonData = [
      { timestamp: '08/07', value1: 56.33, value2: 26.33, value3: 15.33, value4: 56.33, },
      { timestamp: '08/08', value1: 4.33, value2: 16.33, value3: 26.33, value4: 56.33, },
      { timestamp: '08/09', value1: 26.33, value2: 36.33, value3: 36.33, value4: 12.33, },
      { timestamp: '08/10', value1: 36.33, value2: 6.33, value3: 53.33, value4: 31.33, },
      { timestamp: '08/11', value1: 16.33, value2: 65.33, value3: 32.33, value4: 22.33, },
      { timestamp: '08/12', value1: 26.33, value2: 100.33, value3: 5.33, value4: 16.33, },
    ];
    let frame = new Frame(jsonData);
    frame = Frame.combinColumns(frame, ['value1', 'value2', 'value3', 'value4'], 'value', 'count', 'timestamp');
    this.state = {
      data: frame,
    };
  }
  render() {
    const { data } = this.state;

    const Chart = createG2((chart) => {
      chart.col('timestamp', {
        alias: '时间',
      });
      chart.col('value', {
        alias: '次数'
      });
      chart.axis('value', {
        title: {
          fill: '#fff',
        },
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.axis('timestamp', {
        title: null,
        line: {
          stroke: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.legend({
        position: 'bottom',
        unChecked: '#fff',
        word: {
          fill: '#fff',
        },
      });
      chart.line()
        .position('timestamp*value')
        .color('count', ['#1f77b4', '#ff7f0e', '#2ca02c', '#1fa32c'])
        .shape('spline')
        .size(2);
      chart.render();
    });

    return (
      <div className="chart-wrap">
        <Chart
          data={data}
          width={500}
          height={450}
          forceFit
        />
      </div>
    );
  }
}

export default ChartOfPsNumOfCo;
